<template>
  <!-- 分支模块 -->
  <div class="box">
    <div class="branch_box">
      <div class="branch_btn" :class="[nodeInfo.type=='parallelBranch'? 'bx_btn':nodeInfo.type=='anyBranch'? 'ry_btn' :'tj_btn']" v-show='!showZZ'>
        <p @click="addBranch(nodeInfo)">{{nodeInfo.type=='parallelBranch'? '新增并行审批':nodeInfo.type=='anyBranch'? '新增任一审批':'新增条件审批'}}</p>
      </div>
      <div class="cen_box">
        <div class="branch_cen" :class="[nodeInfo.type=='parallelBranch'? 'bx_branch_cen':nodeInfo.type=='parallelBranch'? 'ry_branch_cen':'tj_branch_cen']"  v-for="(item,index) in branchList" :key="item.stepId" @mouseenter="showDel(index)" @mouseleave="hideDel(index)" >
          
          <div class="cen_lin"></div>
          <!-- <div  class="diamond_box" @click.stop="showDrawer(index)" @mouseenter="cssEdit($event)" @mouseleave="cssEdit1($event)"  >
            <div class="diamond" >
            </div>
            <p class="diamond_text">{{item.expression? item.expression:'请选择条件'}}</p>
            <span class="el-icon-error close_diamond" @click.stop="delBranch(item)"></span>
          </div> -->

          
          
          <!-- <div class="condition" >
            <div class="condition_tit">
              <div>
                <i class="el-icon-s-flag"></i>
                <input class="conName" type="text" v-model="conName" :disabled='isDisabled'>
              </div>
              <div class='priority'>
                优先级{{index+1}}
              </div>
              <i class="el-icon-close close" @click="delBranch(item)"></i>
            </div>
            <div class="condition_cen" @click="showDrawer(index)">
              <div class="cenText">
                {{item.expression}}
              </div>
              
              <div class="icon">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            
          </div> -->
          <add :nodeInfo='item' :type='nodeInfo.type'></add>
          <conditionDrawer @hideBranch='hideBranch' :showInd='showInd' :parentNode='nodeInfo' :nodeInfo='item' @condFun='condFun(item,index,arguments)' :ind='index'></conditionDrawer>
          <div v-for="(ite,ind) in item.children" :key="ite.stepId">
            <approve v-if="ite.type=='approve'" :info='ite' @delLin='delLin'></approve>
            <regular v-if="ite.type=='regular'" :info='ite' @delLin='delLin'></regular>
            <make v-if="ite.type=='make'" :info='ite'></make>
            <template v-if="ite.children&&ite.children.length">
              <subBranch v-if="ite.type=='parallelBranch'||ite.type=='anyBranch'||ite.type=='conditionBranch'" :childData='ite.children' :infoData='ite'></subBranch>
            </template>
          </div>
          <!-- <div class="del_lin_btn el-icon-close close" v-show="delIndex==index" @click="delBranch(item.stepId)"></div> -->
          <div v-if="index==0" class="left_top_line line"></div>
          <div v-if="index==0" class="left_bottom_line line"></div>
          <div v-if="index==branchList.length-1" class="right_top_line line"></div>
          <div v-if="index==branchList.length-1" class="right_bottom_line line"></div>
        </div>
      </div>
      <div class="bottom_add">
        <add :nodeInfo='nodeInfo'></add>
      </div>
    </div>
  </div>
</template>

<script>
import add from '../addNode.vue' // 新增节点组件
import approve from './approveNode.vue' // 审核人
import regular from './regular.vue' // 固定节点
import make from './make.vue' // 抄送人
import { mapState } from 'vuex'
import conditionDrawer from '@/components/drawer/conditionDrawer'
export default {
  name: "subBranch",
  components:{
    add,
    approve,
    make,
    conditionDrawer,
    regular
  },
  props:['childData','info','infoData'],
  data(){
    return {
      cenText:'交易金额大于100万',
      conName: '条件名',
      isDisabled:false,
      branchList:[],
      branchNum:[],
      nodeInfo:[],
      showBranch:false,
      priorityText:'',
      showInd:'',
      showDiamond:false,
      delIndex:-1,
    }
  },
  computed:{
    ...mapState({
      dataList: state => state.dataList,
      storeId: state => state.storeId,
      showZZ: state => state.showZZ,
    })
  },
  mounted(){
    if(this.childData){
      this.branchList = this.childData
    }else if(this.info){
      this.branchList = this.info.children
    }
    
    if(this.infoData){
      this.nodeInfo = this.infoData
    }else{
      this.nodeInfo = this.info
    }
  },
  methods:{
    newId(){
      return Date.now()+Math.round(Math.random()*1000);
    },
    delLin(val){
      this.delBranch(val)
    },
    updataId(){
      this.$store.state.storeId++
      return this.storeId
    },
    addBranch(infoData){
      console.log(infoData)
      let lineType = ''
      if(infoData.type=='parallelBranch'){
        lineType = 'parallelLine'
      }else if(infoData.type=='anyBranch'){
        lineType = 'anyLine'
      }else{
        lineType = 'condition'
      }
      let level = infoData.children.length+1
      let id = this.updataId()
      let id1 = this.updataId()
      let nodeData = {
        "stepId":id,//节点ID
        "name":"线路"+id,//节点名称
        "prevStepId":this.nodeInfo.stepId,//上个节点
        "parentStepId": this.nodeInfo.stepId,
        "type":lineType,// 分支线路
        'regularNodeKey':infoData.regularNodeKey,// 上个节点的key
        "level":level,
        "expression": null,
        "children": [
          {
            "stepId":id1,//节点ID
            "name":"审核人"+id1,//节点名称
            "prevStepId":id ,//上个节点
            "children": null,
            "type":'approve',// 审核人
            'regularNodeKey':infoData.regularNodeKey,// 上个节点的key
            "isEnd":1,
            "parentStepId": id,
            "auditType": [], // 审核状态
            "userIdList":[],
            'backNode':'',// 退回节点名称
            "userPermissionSpecific": {
              "examineType" : 1,
              "designatedPerson" :[],
              "designatedRoles": [],
              "designatedDepartments":[],
              "actionSpecificList":[],
              "memberIdList":[]
            }// 选择的审核人列表
          }
        ]
      }
      infoData.children.push(nodeData)
    },
    delBranch(id){
      this.$confirm('此操作将删除整条线路，是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delTrue(this.branchList,id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
                   
        });
    },
    delTrue(list,id,prevNode){
      console.log(list,'-----------list--------------')
      console.log(id,'-----------infoData--------------')
      list.forEach((item,index) => {
        console.log(item,'---------item')
        if(item.stepId == id){
          if(list.length>2){
            list.splice(index,1)
          }else{
            console.log(list[0],'------------list[0]-------------')
            console.log(item,'--------item------------')
            list.splice(index,1)
            this.recurrenceFun(this.dataList,item.prevStepId,list[0].children)
          }
        }
      });
      
    },
    recurrenceFun(list,previd,nodeData){
      list.forEach((ite,ind)=>{
        if(ite.stepId == previd){
          console.log(ite,ind,'ite---------------找到元素了')
          console.log(list,'---------------被循环的元素----------')
          if(ind<list.length-1){
            console.log(list[ind+1],'-----------原本列表中需要改变的元素----------')
            console.log(nodeData,'------------要插入的元素----------')
            if(nodeData&&nodeData.length>0){
              console.log(list[ind],'----------list[ind]1-------------')
              if(this.dataList[this.dataList.length-1].stepId == nodeData[0].stepId){
                nodeData[0].isEnd = 1
              }else{
                nodeData[0].isEnd = 0
              }
              nodeData[0].prevStepId = list[ind].prevStepId
              nodeData[0].parentStepId = list[ind].parentStepId
              list[ind+1].prevStepId = nodeData[nodeData.length-1].stepId
              list.splice(ind,1,...nodeData)
            }else{
              console.log(list,'----------进到这边了嘛-------------')
              list[0].isEnd = 1
              list.splice(ind,1)
            }
            
          }else{
            console.log('----------被删除节点后面没有节点了-----------')
            console.log(nodeData,'------------要插入的元素11----------')
            console.log(list[ind],'----------list[ind]-------------')
            if(nodeData&&nodeData.length>0){
              nodeData[0].prevStepId = list[ind].prevStepId
              nodeData[0].parentStepId = list[ind].parentStepId
              list.splice(ind,1,...nodeData)
            }else{
              list[0].isEnd = 1
              list.splice(ind,1)
            }
            
          }
          
          
          
          console.log(list,'------------整理后的数组----------')
        }else{
          if(ite.children&&ite.children.length>0){
            this.recurrenceFun(ite.children,previd,nodeData)
          }
        }
        
        
        
      })
    },
    showDrawer(index){
      this.showInd = index
    },
    hideBranch(val){
      this.showInd = val
    },
    condFun(item,index){
      console.log(item.stepId,'---------item-------------')
      console.log(arguments[2][0],'-----------优先级--------------')
      this.upDataList(this.dataList,index,item.stepId,arguments[2][0],arguments[2][1])
      // this.priorityText = val
    },
    upDataList(list,oldInd,stepId,level,expression){
      list.forEach((item,index)=>{
        if(item.children&&item.children.length>0){
          console.log(stepId,'------------stepId-------------')
          if(item.stepId==this.nodeInfo.stepId){ //根据优先级替换父元素里面的children的位置
            let oldData = item.children[level-1]
            item.children.splice(level-1,1,item.children[oldInd])
            item.children.splice(oldInd,1,oldData)
          }
          console.log(item.stepId,stepId,'---------------------------------------判断相等------------')
          if(item.stepId==stepId){
            console.log(item,'------------要找的元素----------')
            item.expression = expression
            console.log(item,'---------条件赋值完成---------')
            return
          }
          this.upDataList(item.children,oldInd,stepId,level,expression)
        }else{
          console.log('--------要找的元素不会在这里面----------')
          if(item.stepId==stepId){
            console.log(item,'------------要找的元素111----------')
            item.expression = expression
            console.log(item,'---------条件赋值完成222---------')
            return
          }
        }
      })
    },
    showDel(index){
      this.delIndex = index
    },
    hideDel(){
      this.delIndex = -1
    },
    cssEdit(e){
      let ele = e.currentTarget.firstElementChild 
      let closeEle = e.currentTarget.lastElementChild
      closeEle.style.display = 'inline'
      ele.style.boxShadow = '0 0 5px #747474'
      this.showDiamond = true
    },
    cssEdit1(e){
      let ele = e.currentTarget.firstElementChild 
      let closeEle = e.currentTarget.lastElementChild
      closeEle.style.display = 'none'
      ele.style.boxShadow = ''
      this.showDiamond = false
    }
  }
}
</script>

<style scoped>
  .branch_box{
    
  }
  .branch_btn{
    position: relative;
    width: 100px;
    height: 36px;
    display: flex;
    line-height: 36px;
    font-size: 12px;
    text-align: center;
    height: 36px;
    border-radius: 35px;
    border: 1px solid #ccc;
    cursor: pointer;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0 auto;
    z-index: 9;
    background: #fff;
  }
  .bx_btn{
    background: #3296fa;
    color: #fff !important;
  }
  .ry_btn{
    background: #15bc83;
    color: #fff !important;
  }
  .tj_btn{
    background: #fa4027;
    color: #fff !important;
  }
  
  .branch_btn>p{
    width: 100%;
  }
  .cen_box{
    display: flex;
    justify-content: space-between;
    justify-content: center;
    margin: -18px auto 0;
  }
  .branch_cen{
    min-width: 400px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
    background: #e6e6e6;
  }
  .bx_branch_cen{
    border-top: 1px solid #3296fa;
    border-bottom: 1px solid #3296fa;
  }
  .ry_branch_cen{
    border-top: 1px solid #15bc83;
    border-bottom: 1px solid #15bc83;
  }
  .tj_branch_cen{
    border-top: 1px solid #fa4027;
    border-bottom: 1px solid #fa4027;
  }
  
  .cen_lin{
    width: 2px;
    height: 100%;
    background: #ccc;
    position: absolute;
    left:calc(50% - 0.5px) ;
  }
  
  .condition{
  width: 240px;
  height: 100px;
  border: 1px solid #ccc;
  margin: 40px auto;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  position: relative;
  z-index: 9;
}

.condition_tit{
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #975833;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.close{
  font-size: 18px;
  cursor: pointer;
}
.condition_cen{
  display: flex;
  align-items: center;
  height: 70px;
  line-height: 30px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  color: #222;
}
.cenText{
  width: 200px;
}

.icon{
  width: 40px;
  text-align: center;
}
.conName{
  border: none;
  background: #975833;
  text-align: left;
  width: 100px;
}
/* .priority{
  width: 200px;
  font-size: 14px;
  color: #ccc;
} */


.icon{
  width: 40px;
  text-align: center;
}
.condition:hover{
  border: 1px solid #1d9cf1;
}
.del_lin_btn{
  position: absolute;
  cursor: pointer;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background: red;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  text-align: center;
  top: 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
}
  .line{
    width: 50%;
    height: 5px;
    background: #e6e6e6;
    position: absolute;
  }
  .left_top_line{
    top: -2px;
    left: -1px;
  }
  .left_bottom_line{
    bottom: -2px;
    left: -1px;
  }
  .right_top_line{
    top: -2px;
    right: -1px;
  }
  .right_bottom_line{
    bottom: -2px;
    right: -1px;
  }
  .diamond_box{
    width: 240px;
    height: 100px;
    margin: 40px auto;
    position: relative;
    cursor: pointer;
  }
  .diamond {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: rotateZ(135deg)skew(22deg,22deg);
    background: #fff;
    border: 1px solid #ccc;
    top: 0;
    left: 70px;
    
  }
  
  .diamond_text{
    text-align: center;
    line-height: 100px;
    position: relative;
    z-index: 999;
    margin: 0 auto;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .close_diamond{
    color: red;
    font-size: 22px;
    position: absolute;
    top: 0;
    right: 40px;
    display: none;
    z-index: 999;
  }
</style>